<template>
  <el-tabs>
    <el-tab-pane label="检定数据">
      <el-table height="500px" :data="tableData" border stripe highlight-current-row>
        <el-table-column label="序号" width="60px" type="index" align="center" />
        <el-table-column prop="num" label="读数顺序" align="center" />
        <el-table-column prop="point" label="检定点" align="center" />
        <el-table-column prop="standardValue" label="标准读数值" align="center" />
        <el-table-column prop="standardValueCorrected" label="标准值修正值" align="center" />
        <el-table-column prop="standardValueReal" label="标准值真实值" align="center" />
        <el-table-column prop="sensorValue" label="传感器读数值" align="center" />
        <el-table-column prop="sensorValueCorrected" label="传感器修正值" align="center" />
        <el-table-column prop="sensorValueReal" label="传感器真实值" align="center" />
        <el-table-column prop="diffValue" label="差值" align="center" />
        <el-table-column prop="isQualified" label="是否合格" align="center">
          <template #default="scope">
            {{ scope.row.isQualified ? "合格" : "不合格" }}
          </template>
        </el-table-column>
        <el-table-column prop="qualifiedError" label="允许误差" align="center" />
        <el-table-column prop="envTemp" label="环境温度(℃)" align="center" />
        <el-table-column prop="envHumidity" label="环境湿度(%)" align="center" />
        <el-table-column prop="envPressure" label="大气压(hPa)" align="center" />
        <el-table-column prop="createTime" label="检测时间" align="center" />
      </el-table>
    </el-tab-pane>
    <el-tab-pane label="曲线图">
      <ECharts :options="chartOptions" />
    </el-tab-pane>
  </el-tabs>
</template>

<script setup lang="ts">
import recordApi from "@/api/business/record.api";
import { detectRecordDetail } from "@/types/business/record";
import { ref } from "vue";

const props = defineProps<{
  recordId: number;
}>();

const tableData = ref<detectRecordDetail[]>([]);

// 添加对recordId的监听
watch(
  () => props.recordId,
  (newVal) => {
    if (newVal) {
      getDetail();
    }
  },
  { immediate: true }
);

function getDetail() {
  recordApi
    .getDetail(props.recordId)
    .then((data) => {
      if (!data || !data.length) return;

      tableData.value = data;
      getChartData(props.recordId, data[0].createTime);
    })
    .catch((error) => {
      console.error("获取检定记录详情失败:", error);
    });
}

function getChartData(recordId: number, recordTime: Date) {
  chartOptions.value.series = [
    {
      id: 1,
      name: "设定",
      type: "line",
      smooth: true,
      showSymbol: false,
      data: [],
    },
    {
      id: 2,
      name: "发生器",
      type: "line",
      smooth: true,
      showSymbol: false,
      data: [],
    },
    {
      id: 3,
      name: "标准器",
      type: "line",
      smooth: true,
      showSymbol: false,
      data: [],
    },
    {
      id: 4,
      name: "传感器",
      type: "line",
      smooth: true,
      showSymbol: false,
      data: [],
    },
  ];
  recordApi.getProcessData(recordId, recordTime).then((data) => {
    data.forEach((item) => {
      chartOptions.value.series[0].data.push([item.createTime, item.setVal]);
      chartOptions.value.series[1].data.push([item.createTime, item.generatorVal]);
      chartOptions.value.series[2].data.push([item.createTime, item.standardVal]);
      chartOptions.value.series[3].data.push([item.createTime, item.sensorVal]);
    });
  });
}

const chartOptions = ref({
  legend: {
    type: "scroll",
    bottom: 5,
  },
  tooltip: {
    trigger: "axis",
  },
  xAxis: {
    type: "time" as const,
  },
  yAxis: {
    name: "",
    type: "value" as const,
  },
  series: [] as {
    id: number;
    name: string;
    type: "line";
    smooth: boolean;
    showSymbol: boolean;
    data: [Date, number][];
  }[],
});
</script>
